<template>
	<view class="bg-white container" style="height: 100vh;">
		<view style="font-size: 0.7cm;" class="text-bold text-center text-gray">
			请您选择须要的服务
		</view>
		<view style="padding-top: 3vh;">
			<view class="circle-btn pulse-animation" @click="install">
			  <text>安 装</text>
			</view>
		</view>
		<view style="padding-top: 6vh;">
			<view class="circle-btn pulse-animation" @click="fault">
			  <text>维 修</text>
			</view>
		</view>   
	</view>
</template>

<script>
	export default {
		methods: {
			/**
			 * @example 导航到报装页面
			 */
			install() {
				uni.navigateTo({
					url: '/pages/install/index'
				});
			},
			/**
			 * @example 导航到报修页面
			 */
			fault() {
				uni.navigateTo({
					url: '/pages/fault/index'
				});
			}
		}
	}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
/* 基础圆形按钮样式 */
.circle-btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #1E90FF;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  margin: 40px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.circle-btn:active {
  transform: scale(0.95);
  background-color: #187bcd; /* 点击时更深的蓝色 */
}
/* 文字样式 */
.circle-btn text {
  font-size: 40rpx;
  position: relative;
  z-index: 2;
  transition: transform 0.3s;
}
/* 呼吸动画效果 */
.pulse-animation {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20rpx rgba(30, 144, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0);
  }
}

</style>